var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass')(require('sass'));
var reload      = browserSync.reload;
var autoprefixer= require('gulp-autoprefixer');
var cleanCSS    = require('gulp-clean-css');
var rename      = require("gulp-rename");

// scss编译后的css将注入到浏览器里实现更新
gulp.task('scss', function() {
    return gulp.src("./scss/*.scss")
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist:['> 1%', 'last 2 versions', 'Firefox ESR'],
            cascade: false
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(cleanCSS())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest("./assets/css"))
        .pipe(reload({stream: true}));
});

// 静态服务器 + 监听 scss/html 文件
gulp.task('serve', gulp.series('scss', function() {

    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("./scss/*.scss", gulp.series('scss'));
    gulp.watch("./*.html").on('change', reload);
}));




gulp.task('default', gulp.series('serve'));




